<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/11.css">
</head>

<body>
    <header>
        <nav>
            <ul class="clear">
                <li class="fl"><img src="./img/扫一扫.jpg" alt=""></li>
                <li class="fl"> <img src="./img/搜索.png" alt=""><input type="text" placeholder="搜索美食"></li>
                <li class="fl"><img src="./img/消息.jpg" alt=""></li>
            </ul>
        </nav>


    </header>

    <section id="con">
        <section id="con1">
            <ul class="clear">
                <li class="fl">寿司</li>
                <li class="fl">南瓜饼</li>
                <li class="fl">火锅</li>
                <li class="fl">自助餐</li>
                <li class="fl">晚餐</li>
                <li class="fl">水果</li>
            </ul>
            <p><img src="./img/主图.jpg" alt=""></p>
        </section>

        <section id="con2">
            <ul class="clear">
                <li class="fl"><img src="./img/item-01.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-02.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-03.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-04.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-05.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-06.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-07.jpg" alt="">
                    <p>本帮菜</p>
                </li>
                <li class="fl"><img src="./img/item-08.jpg" alt="">
                    <p>本帮菜</p>
                </li>
            </ul>
        </section>


        <section id="con3">
            <ul class="clear">
                <li class="fl">
                    <img src="./img/main-01.jpg" alt="">
                </li>
                <li class="fl">
                    <p><img src="./img/main-02.jpg" alt=""></p>
                    <p><img src="./img/main-03.jpg" alt=""></p>

                </li>

            </ul>
        </section>

        <section id="con4">
            <div class="con1">
                <ul class="clear">
                    <li class="fl">推荐</li>
                    <li class="fl">附近</li>
                    <li class="fl">人气</li>
                    <li class="fl">网红</li>
                    <li class="fl">商务</li>

                </ul>
            </div>


        </section>
        <footer>
            <ul class="clear">
                <li class="fl">
                    <img src="./img/首页.png" alt="">
                    <p>首页</p>
                </li>
                <li class="fl">
                    <img src="./img/抽奖.png" alt="">
                    <p>抽奖</p>
                </li>
                <li class="fl">
                    <img src="./img/会员.png" alt="">
                    <p>会员</p>
                </li>
                <li class="fl">
                    <img src="./img/评价.png" alt="">
                    <p>评价</p>
                </li>
                <li class="fl">
                    <img src="./img/评价.png" alt="">
                    <p>登录</p>
                </li>
            </ul>
        </footer>
    </section>



</body>

</html>